<template>
  <div class="monthly">
    <div class="bigbox">
      <!-- 头部 -->
      <header>
        <div class="h-left">
          <div @click="back"
            ><img src="../../assets/image/18721.png" style="width: 8px"
          /></div>
        </div>
        <div class="h-title">包月专区</div>
        <div class="h-right"></div>
      </header>
      <!-- 中间搜索框 -->
      <router-link to="/search">
        <div class="m-search">
          <!-- 输入框 -->
          <div class="inp">
            <input type="text" placeholder="作者名/书名" />
          </div>
          <!-- 放大镜 -->
          <div class="magnifier"></div>
        </div>
      </router-link>
      <!-- VIP包月特权 -->
      <div class="monthly_all">
        <div class="vipsyfy_top">VIP包月特权</div>
        <div class="new-vipsyfy">
          <div>
            <dl>
              <a href="#">
                <img
                  src="https://img.xmkanshu.com/operateimg/img/img/18739/18739.png"
                />
              </a>
            </dl>
            <dt>包月图书免费读</dt>
          </div>
          <div>
            <dl>
              <a href="#">
                <img
                  src="https://img.xmkanshu.com/operateimg/img/img/18740/18740.png"
                />
              </a>
            </dl>
            <dt>购书8折</dt>
          </div>
          <div>
            <dl>
              <a href="#">
                <img
                  src="https://img.xmkanshu.com/operateimg/img/img/18741/18741.png"
                />
              </a>
            </dl>
            <dt>连章6.5折</dt>
          </div>
        </div>
        <div  class="vip_btn" style="color:#fff;">
          我要开通
        </div>
      </div>
      <!-- 包月精品 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">包月精品</div>
        <monthlypremium></monthlypremium>
      </div>
      <!-- 包月新书速递 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">包月新书速递</div>
        <monthlypremium></monthlypremium>
      </div>
      <!-- 男生包月 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">男生包月</div>
        <monthlypremium></monthlypremium>

        <router-link to="/schoolboy" tag="div" class="more-title"
          >更多男生包月小说<i></i
        ></router-link>
      </div>
      <!-- 女生包月 -->
      <div class="box" style="margin-top: 10px">
        <div class="all-title">女生包月</div>
        <monthlypremium></monthlypremium>

        <router-link to="/schoolgirl" tag="div" class="more-title"
          >更多女生包月小说<i></i
        ></router-link>
      </div>
      <!-- 页脚搜索框 -->
      <div class="m-search">
        <!-- 输入框 -->
        <div class="inp">
          <input type="text" placeholder="作者名/书名" />
        </div>
        <!-- 放大镜 -->
        <a href="../子页面/搜索页面.html"><div class="magnifier"></div></a>
      </div>
      <!-- 页脚 -->
      <footermodule></footermodule>
    </div>
  </div>
</template>

<script>
import monthlypremium from "../../components/MonthlyPremium.vue";
import footermodule from "../../components/FooterModule.vue";

export default {
  methods: {
    //   返回上一步
    back() {
      this.$router.go(-1);
    },
  },
  components: {
    monthlypremium,
    footermodule,
  },
};
</script>

<style lang="scss" scoped>
.monthly_all {
  background: #fff;
  margin-top: 10px;
  padding-bottom: 16px;
}
.vipsyfy_top {
  -webkit-box-flex: 1;
  height: 38px;
  border-bottom: 1px #dedede solid;
  text-align: center;
  color: #ae9269;
  font-size: 16px;
  line-height: 38px;
}
.new-vipsyfy {
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  & > div {
    -webkit-box-flex: 1;
    margin-top: 16px;
    text-align: center;
    width: 33.333333%;
    img {
      width: 45px;
      height: 45px;
    }
    & > dl {
      margin: 0;
      padding: 0;
      font-size: 12px;
      color: #000;
    }
    & > dt {
      margin: 0;
      padding: 0;
      line-height: 23px;
      font-size: 12px;
      color: #5f5f5f;
    }
  }
}
.vip_btn {
  margin: 10px 10px 0 10px;
  height: 39px;
  line-height: 39px;
  text-align: center;
  background-color: #f54b41;
  font-size: 15px;
  border-radius: 3px;
}
/* 包月 */
.book-list-new {
  background: #fff;
  position: relative;
  padding: 15px 10px;
  .tit-all {
    .names {
      -webkit-box-flex: 1;
      font-size: 15px;
      color: #2a2a2a;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      span {
        color: #666;
      }
    }
  }
  .brief {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>